<template>
  <div>
    <div class="box" v-for="talk in talkList" :key="talk.talk_id" >
      <div class="header">
        <div class="avatar">
          <el-avatar fit="fill" :src="talk.avatar"></el-avatar>
        </div>
        <div class="avatar-info">
          <div class="name" style="font-size: 16px; font-weight: bold">
            {{ talk.uname }}
          </div>
          <div class="time-before" style="font-size: 13px">
            {{ uptime(talk.talk.create_time) }}
          </div>
        </div>

        <el-dropdown style="float: right" trigger="click">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>关注</el-dropdown-item>
            <el-dropdown-item>取消关注</el-dropdown-item>
            <el-dropdown-item>屏蔽</el-dropdown-item>
            <el-dropdown-item disabled>置顶</el-dropdown-item>
            <el-dropdown-item divided>编辑</el-dropdown-item>
            <el-dropdown-item divided>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!-- 外部div不能包裹浮动元素，强制包裹 -->
        <div style="clear: both"></div>
      </div>
      <div class="content">{{ talk.talk.content }}</div>
      <el-divider></el-divider>
      <div class="box-bottom">
        <bottom-bar :talkInfo="talk" :key="talk.talk_id"></bottom-bar>
      </div>
    </div>
  </div>
</template>

<script>
import BottomBar from "./BottomBar.vue";
import {time_util} from "../plugins/time_utils"
export default {
  components: { BottomBar },
  name: "MessageList",
  props: {
    talkList: {
      type: Array 
    }
  },
  data() {
    return {
      item: {
        img: "",
      },
      text: "Hello World",
    };
  },
  methods: {
    uptime(time_up) {
      return time_util(time_up)
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  background-color: #fff;
  padding: 10px 10px 1px 10px;
  margin-top: 2%;
  margin-bottom: 5px;
  
}

.avatar {
  margin-left: 10px;
  margin-bottom: 10px;
  display: flex;
  float: left;
}
.avatar-info {
  display: inherit;
  text-align: left;
  padding: 4px 6px 6px 15px;
  float: left;
}

.content {
  font-size: 14px;
  text-align: left;
  margin-left: 65px;
  position: relative;
}

.el-divider {
  margin-bottom: 2px;
}

.box-bottom {
  margin-bottom: 0px;
}

.time-before {
  margin-top: 3px;
}

.el-dropdown {
  padding-right: 30px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>